import { Popover } from "antd";
import { CaretDownOutlined, RightOutlined } from "@ant-design/icons";
import createTabsLess from "./index.module.less";
import { GetActivityListApi } from "@/http/api/article";
import { useState, useEffect } from "react";
import { ActivityListType } from "./utils/type";
import { useNavigate } from "react-router-dom";
function CreateTabs() {
  const [Activity, setActivityList] = useState([]);
  const navigate = useNavigate();

  const GetActivityList = async () => {
    const params = {
      PageSize: 3,
      PageNum: 1,
      Type: "",
    };
    const res: any = await GetActivityListApi(params);
    console.log("获取活动列表", res);
    if (res.status === 0) {
      setActivityList(res.ActivityList);
    }
  };

  const publishArticle = () => {
    navigate("/publishArticle/rich");
  };

  useEffect(() => {
    GetActivityList();
  }, []);

  const content = (
    <div className={createTabsLess.createTabs_content}>
      <div className="createTabs_top_content">
        <div className="createTabs_top_item" onClick={publishArticle}>
          <div className="createTabs_icon">
            <img src="../../../public/fontimg/article.svg" alt="" />
          </div>
          <div className="createTabs_title">写文章</div>
        </div>
        <div className="createTabs_top_item">
          <div className="createTabs_icon">
            <img src="../../../public/fontimg/push.svg" alt="" />
          </div>
          <div className="createTabs_title">发沸点</div>
        </div>
        <div className="createTabs_top_item">
          <div className="createTabs_icon">
            <img src="../../../public/fontimg/wither.svg" alt="" />
          </div>
          <div className="createTabs_title">写笔记</div>
        </div>
        <div className="createTabs_top_item">
          <div className="createTabs_icon">
            <img src="../../../public/fontimg/writeCode.svg" alt="" />
          </div>
          <div className="createTabs_title">写代码</div>
        </div>
        <div className="createTabs_top_item">
          <div className="createTabs_icon">
            <img src="../../../public/fontimg/box.svg" alt="" />
          </div>
          <div className="createTabs_title">草稿箱</div>
        </div>
      </div>
      <div className="createTabs_idea">
        <div className="createTabs_idea_top">
          <div className="createTabs_left_top">创作灵感</div>
          <div className="createTabs_right_top">
            查看更多
            <RightOutlined />
          </div>
        </div>
      </div>
      <div className="createTabs_activity">
        {Activity.map((item: ActivityListType, index: number) => {
          return (
            <div className="items" key={index}>
              {item.ActivityType === 1 ? (
                <div className="header_huo">活动</div>
              ) : item.ActivityType === 2 ? (
                <div className="header_hua">话题</div>
              ) : (
                ""
              )}
              <div className="header_title">{item.ActivityTitle}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
  return (
    <>
      <Popover content={content} trigger="hover" placement="topRight">
        <div className={createTabsLess.createTabs_name}>
          <CaretDownOutlined />
        </div>
      </Popover>
    </>
  );
}

export default CreateTabs;
